<template>
  <div>
    <custom-table
      :data="table.data"
      :total="table.total"
      :currentPage="table.currentPage"
      :pageSize="table.pageSize"
      :border="table.border"
      :columns="table.columns"
      :layouts="table.layouts"
      :paginationStyle="table.paginationStyle"
      :defaultSort="table.defaultSort"
      @handleCurrentChange="handleCurrentChange"
    >
      <template v-slot:operation="scope">
        <el-button size="mini" type="primary" @click="handleShowDetail(scope.row)">预览详情</el-button>
        <el-button size="mini" type="primary" @click="handleupdateProgress(scope.row)">更新进展</el-button>
      </template>
    </custom-table>

    <el-dialog
      title="预览详情"
      :visible.sync="showDetail"
      width="60%"
    >
      <div class="detail_container">
        <div class="content1">
          <div class="leftPart">
            <div class="row"><span class="key">问题热度</span> <span class="value">{{currentRowInfo?.score}}</span></div>
            <div class="row"><span class="key">所属分类</span> <span class="value">{{currentRowInfo?.category}}</span></div>
            <div class="row"><span class="key">当前状态</span> <span class="value">{{currentRowInfo?.state}}</span></div>
            <div class="row"><span class="key">问题描述</span> <span class="value">{{currentRowInfo?.description}}</span></div>
            <div class="row"><span class="key">发生地</span> <span class="value">{{currentRowInfo?.location}}</span></div>
            <div class="row"><span class="key">上报时间</span> <span class="value">{{currentRowInfo?.createdTime}}</span></div>
          </div>
          <div class="rightPart">
            <el-carousel height="200px">
              <el-carousel-item v-for="(item,index) in currentRowInfo?.imgUrls" :key="index">
                <img :src="item">
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        
        <div class="content2">
          <el-collapse v-model="activeName">
            <el-collapse-item title="最新进展" name="1">
              <ol>
                <li class="row"  v-for="item in currentRowInfoReverseProcess">
                  <div>
                    <span class="time">更新时间：{{item.time}}</span> 
                    <span>&nbsp;&nbsp;&nbsp;</span>
                    <span class="state">状态：{{item.state}}</span> 
                  </div>
                  <div v-if="item.description" class="description">
                    详情： {{item?.description}}
                  </div>
                </li>
              </ol>
              
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title="更新进展"
      :visible.sync="showProgress"
      width="60%"
    >
      <div >
        <el-steps :space="200" :active="activeStep" finish-status="success" style="margin-bottom:20px">
          <el-step v-for="item in allProcess" :title="item"></el-step>
        </el-steps>

        <el-form ref="form" :model="newProcessForm" label-width="100px" label-position="left">
          <el-form-item label="待更新状态">
            <el-input disabled :value="allProcess[activeStep]"></el-input>
          </el-form-item>
          <el-form-item label="最新进展描述">
            <el-input :disabled="activeStep >= 4" type="textarea" v-model="newProcessForm.description"></el-input>
          </el-form-item>
          
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="showProgress = false">取 消</el-button>
        <el-button :disabled="activeStep >= 4" type="primary" @click="updateProgress" >更新</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CustomTable from "@/components/customTable/index.vue"
import {formatTime} from "@/utils/utils"

export default {

  data() {
    return {
      table:{
        data:[],
        total:0,
        currentPage:1,
        pageSize:5,
        border:true,
        layouts:[ 'prev, pager, next, jumper','total, sizes'],
        paginationStyle:"display:flex;justify-content: space-between;",
        defaultSort:{prop:'createdTime',order:'descending'},
        columns:[
          {
            type:"index",
            label:"序号",
            index:(index)=>(index+1) + (this.table.currentPage - 1) * this.table.pageSize,
            width:"50px"
          },
          {
            prop:"category",
            label:"问题分类",
            filters:[
              {text:'车辆乱停',value:'车辆乱停'},
              {text:'随意堆放',value:'随意堆放'},
              {text:'公物损坏',value:'公物损坏'},
              {text:'社区卫生',value:'社区卫生'},
              {text:'其它',value:'其它 '},
            ],
            filterMethod:(value, row)=>{
              return row.category === value;
            }
          },
          {
            prop:"createdTime",
            label:"上报时间",
            sortable:true
          },
          {
            prop:"description",
            label:"问题描述",
            showOverflowTooltip:true
          },
          {
            prop:"location",
            label:"发生地",
            showOverflowTooltip:true
          },
          {
            prop:"state",
            label:"当前状态",
            filters:[
              {text:'问题已上报',value:'问题已上报'},
              {text:'问题处理中',value:'问题处理中'},
              {text:'已安排相关人员',value:'已安排相关人员'},
              {text:'问题已解决',value:'问题已解决'},
            ],
            filterMethod:(value, row)=>{
              return row.state === value;
            }
          },
          {
            slot:true,
            label:"操作",
            name:"operation"
          }
        ]
      },
      showDetail:false,
      showProgress:false,
      currentRowInfo:null,
      activeName:[],
      allProcess:['问题已上报','已安排相关人员','问题处理中','问题已解决'],
      newProcessForm:{
        description:""
      }
    }
  },
  computed:{
    currentRowInfoReverseProcess(){
      if(this.currentRowInfo){
        
        return this.currentRowInfo.process.reverse()
      }else{
        return []
      }
    },
    activeStep(){
      if(this.currentRowInfo){
        return this.currentRowInfo.process.length
      }else{
        return 0
      }
    },
    topScore(){
      this.table.data
    }
  },
  methods: {
    getReportList(){
      this.$API.report.getAllList(this.table.currentPage,this.table.pageSize).then(res=>{
        this.table.data = this.format(res.data) 
        this.table.total = res.total
      }).catch(err=>{
        console.log(err);
      })
    },
    format(data){
      let newData = data.map(item=>{
        let state = item.process.at(-1).state
        return {...item,...{state}}
      })

      return newData
    },
    handleCurrentChange(val){
      this.table.currentPage = val
      this.getReportList()
    },
    handleShowDetail(row){
      console.log(row);
      this.showDetail = true
      this.currentRowInfo = row
    },
    handleupdateProgress(row){
      this.showProgress = true
      this.currentRowInfo = row
    },
    // 更新进展
    updateProgress(){
      let form = this.newProcessForm
      
      form = {...form,...{
        time:formatTime(Date.now()),
        state:this.allProcess[this.activeStep]
      }}

      this.$API.report.updateProcess(this.currentRowInfo._id,form).then(res=>{
        this.getReportList()
      })

      this.showProgress = false
      this.newProcessForm.description = ""
    },
    handleChange(val) {
      console.log(val);
    }
  },
  components:{CustomTable},
  created(){
    this.getReportList()
  }
}
</script>

<style lang='less'>
  .detail_container{
    width: 100%;
    height: 100%;
    .content1{
      display: flex;
      .leftPart{
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding-left: 15px;
        .row{
          height: 30px;
          display: flex;
          align-items: center;
          .key{
            width: 80px;
            font-weight: 700;
          }
        }
      }
      .rightPart{
        display: flex;
        justify-content: center;
        width: 50%;
        height: 100%;
        .el-carousel{
          width: 300px !important;
        }
        img{
          width: 300px;
          height: 200px;
        }
      }
    }
    .content2{
      margin-top: 20px;
      .title{
        width: 80px;
        font-weight: 700;
      }
      .row{
        .state{
          width: 20vw;
        }
      }
    }
  }
</style>